<style lang="less">
  @import "./home.less";
  @import "../../styles/common.less";
</style>
<template>
  <div class="home-main">
    <Row>
      <i-col span="8">
        <Row>
          <Card>
            <Row type="flex" class="user-infor">
              <i-col span="8">
                <Row class-name="made-child-con-middle" type="flex" align="middle" style="justify-content: center">
                  <img class="avator-img" :src="avatorPath"/>
                </Row>
              </i-col>
              <i-col span="16" style="padding-left:6px;">
                <Row class-name="made-child-con-middle" type="flex" align="middle">
                  <div style="width: 100%">
                    <p class="card-user-infor-name">{{userName}}</p>
                    <p style="color: #333333;padding:1px 0;">
                      <Icon type="ios-home"></Icon>&nbsp;&nbsp;{{company}}
                    </p>
                    <p style="color: #333333;padding:1px 0;">
                      <Icon type="ios-mail"></Icon>&nbsp;&nbsp;<a :href="'mailto:'+email">{{email?email:'暂未填写'}}</a>
                    </p>
                    <p style="color: #333333;padding:1px 0;">
                      <Icon type="ios-call"></Icon>&nbsp;&nbsp;{{phone?phone:'暂未填写'}}
                    </p>
                  </div>
                </Row>
              </i-col>
            </Row>
            <!--<to-do :data="todoLists" @getTodos="getTodos" v-show="todos.length > 0"></to-do>-->
          </Card>
        </Row>
        <Card style="margin-top: 10px;">
          <p slot="title">日程的安排</p>
          <div>
            <div style="text-align: center" v-if="todoLists.length === 0">
              <img src="static/image/nl.png" alt="" style="height: 180px">
            </div>
            <Table v-if="todoLists.length > 0" size="small" :show-header="false" :data="todoLists" :columns="todoCol"></Table>
          </div>
        </Card>
        <Row class="margin-top-10">
          <Card style="position:absolute">
            <p slot="title" class="card-title">
              <Icon style="color:#4caf50" type="leaf"></Icon>
              <span style="color: #ec726f">
                            {{texts[new Date().getDate().toString().split('')[new Date().getDate().toString().length - 1]]}}
                        </span>
            </p>
            <div>
              <Row class="margin-top-8">
                <div style="text-align: center;">
                  <img id="background"
                       :src="'static/image/home/'+ picNum +'.jpg'"
                       alt="今日一图"
                       style="width: 100%">
                </div>
              </Row>
            </div>
          </Card>
        </Row>
      </i-col>
      <i-col span="16" class-name="padding-left-5">
        <!--<Row :gutter="5">-->
          <!--&lt;!&ndash;<i-col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">&ndash;&gt;-->
            <!--&lt;!&ndash;<info-card&ndash;&gt;-->
              <!--&lt;!&ndash;id-name="user_created_count"&ndash;&gt;-->
              <!--&lt;!&ndash;:end-val="count.anaTotal"&ndash;&gt;-->
              <!--&lt;!&ndash;iconType="ios-chatboxes"&ndash;&gt;-->
              <!--&lt;!&ndash;color="#2d8cf0"&ndash;&gt;-->
              <!--&lt;!&ndash;:index="1"&ndash;&gt;-->
              <!--&lt;!&ndash;:lists="count.anaCodes"&ndash;&gt;-->
              <!--&lt;!&ndash;intro-text="目前分析中需求量"&ndash;&gt;-->
            <!--&lt;!&ndash;&gt;</info-card>&ndash;&gt;-->
          <!--&lt;!&ndash;</i-col>&ndash;&gt;-->
          <!--&lt;!&ndash;<i-col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">&ndash;&gt;-->
            <!--&lt;!&ndash;<info-card&ndash;&gt;-->
              <!--&lt;!&ndash;id-name="visit_count"&ndash;&gt;-->
              <!--&lt;!&ndash;:end-val="count.devTotal"&ndash;&gt;-->
              <!--&lt;!&ndash;iconType="md-code-working"&ndash;&gt;-->
              <!--&lt;!&ndash;color="#64d572"&ndash;&gt;-->
              <!--&lt;!&ndash;:index="2"&ndash;&gt;-->
              <!--&lt;!&ndash;:lists="count.devCodes"&ndash;&gt;-->
              <!--&lt;!&ndash;:iconSize="50"&ndash;&gt;-->
              <!--&lt;!&ndash;intro-text="目前开发中需求量"&ndash;&gt;-->
            <!--&lt;!&ndash;&gt;</info-card>&ndash;&gt;-->
          <!--&lt;!&ndash;</i-col>&ndash;&gt;-->
          <!--&lt;!&ndash;<i-col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">&ndash;&gt;-->
            <!--&lt;!&ndash;<info-card&ndash;&gt;-->
              <!--&lt;!&ndash;id-name="collection_count"&ndash;&gt;-->
              <!--&lt;!&ndash;:end-val="count.datTotal"&ndash;&gt;-->
              <!--&lt;!&ndash;iconType="md-shuffle"&ndash;&gt;-->
              <!--&lt;!&ndash;color="#ffd572"&ndash;&gt;-->
              <!--&lt;!&ndash;:index="3"&ndash;&gt;-->
              <!--&lt;!&ndash;:lists="count.datCodes"&ndash;&gt;-->
              <!--&lt;!&ndash;intro-text="目前DAT测试需求量"&ndash;&gt;-->
            <!--&lt;!&ndash;&gt;</info-card>&ndash;&gt;-->
          <!--&lt;!&ndash;</i-col>&ndash;&gt;-->
          <!--&lt;!&ndash;<i-col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">&ndash;&gt;-->
            <!--&lt;!&ndash;<info-card&ndash;&gt;-->
              <!--&lt;!&ndash;id-name="transfer_count"&ndash;&gt;-->
              <!--&lt;!&ndash;:end-val="count.uatTotal"&ndash;&gt;-->
              <!--&lt;!&ndash;iconType="md-globe"&ndash;&gt;-->
              <!--&lt;!&ndash;color="#f25e43"&ndash;&gt;-->
              <!--&lt;!&ndash;:index="4"&ndash;&gt;-->
              <!--&lt;!&ndash;:lists="count.uatCodes"&ndash;&gt;-->
              <!--&lt;!&ndash;intro-text="目前UAT环境中需求量"&ndash;&gt;-->
            <!--&lt;!&ndash;&gt;</info-card>&ndash;&gt;-->
          <!--&lt;!&ndash;</i-col>&ndash;&gt;-->
        <!--</Row>-->
        <Row>
          <Card style="margin-bottom: 10px">
            <p slot="title">待办通知</p>
            <a slot="extra" style="font-weight: 700" href="javascript:void(0)" @click.prevent="getMoreInfo">更多>></a>
            <div>
              <waitList></waitList>
            </div>
          </Card>
        </Row>
        <Row>
          <Card :padding="0">
            <p slot="title" class="card-title">
              <Icon type="map"></Icon>
              个人工作日历
            </p>
            <div>
              <user-plan :dataSource="planData" v-if="show" @recordTodos="recordTodos"></user-plan>
            </div>
<!--            <div v-if="planData.length === 0" style="text-align: center">-->
<!--              <img src="static/image/nl.png" alt="" style="height: 244px">-->
<!--            </div>-->
          </Card>
        </Row>
      </i-col>
    </Row>
    <Modal v-model="visible" title="日志记录" @on-ok="saveTodo" @on-cancel="cancelCreateTodo">
      <Form :model="formItem">
        <FormItem label="创建时间" style="margin-bottom: 0">
          {{formItem.currentNoteDate}}
        </FormItem>
        <FormItem label="日志内容">
          <i-input v-model="formItem.note" :autofocus="true" type="textarea" :autosize="{minRows: 4,maxRows: 10}"
                   placeholder="填写日志内容"
                   style="width:100%"></i-input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import infoCard from './components/inforCard.vue';
  import userPlan from './components/userPlan.vue';
  import Todos from './todos.vue'
  import WaitList from './components/waitList.vue'

  export default {
    components: {
      'info-card': infoCard,
      'user-plan': userPlan,
      'to-do': Todos,
      'waitList':WaitList
    },
    data() {
      return {
        picNum: null,
        currentTodo: '0',
        formItem: {
          currentNoteDate: '',
          note: ''
        },
        visible: false,
        texts: [
          "偷偷挤进一缕斜阳，送来满满幸福",
          "积一时之跬步，臻千里之遥程",
          "用心每一天，不忘初心，方能走远",
          "拥抱阳光，转身心晴",
          "雄关漫道真如铁 而今迈步从头越",
          "看轻看淡多少，痛苦就离开你多少",
          "不开心时，记得要让心情转个弯",
          "惜时光，演绎精彩生活",
          "依心而行，无憾今生",
          "缘深多聚聚，缘浅随它去"
        ],
        todos: [],
        show: true,
        user: this.$ls.get("user"),
        userName: this.$ls.get("realName"),
        company: this.$ls.get("company"),
        email: this.$ls.get("email"),
        phone: this.$ls.get("phone"),
        headAppear: this.$ls.get("setAvator"),
        planData: [],
        loading: false,
        searchItem: "国联人寿",
        newsLists: [],
        weatherData: [],
        count: {
          anaTotal: 0,
          anaCodes: [],
          devTotal: 0,
          devCodes: [],
          datTotal: 0,
          datCodes: [],
          uatTotal: 0,
          uatCodes: []
        },
        density: {
          datDefectOmissionRate: 0,
          developDefectDensity: 0,
          itemDefectDensity: 0,
          uatDefectOmissionRate: 0,
          hotalDefectCount: 0,
          dateDefectRate: 0,
          prdDefectRate: 0
        },
        calElement: {
          checkTime: 0,
          datCount: 0,
          developTime: 0,
          lisCount: 0,
          uatCount: 0,
          preCount: 0,
          developDays: ''
        },
        todoCol:[
          {
            title:'备注',
            key:'note',
            render:(h,params) =>{
              return h('div',{
                style:{
                  display:'flex',
                  flexDirection:'row',
                  alignItems: 'center'
                }
              },[
                h('Icon',{
                  props:{
                    type:'ios-document',
                    size: 14,
                    color:'#2d8cf0'
                  }
                }),
                h('span',params.row.note)
              ])
            }
          },
          {
            title:'日期',
            key:'date',
            width:120
          },
          {
            title: '操作',
            key: 'action',
            align:'center',
            width: 60,
            render: (h, params) => {
              return h('Checkbox', {
                props:{
                  size:'small'
                },
                on: {
                  'on-change': () => {
                    $.get('../api/note/deleteNote/' + params.row.id, {}, (data) => {
                      if (data.code === 400) {
                        this.$Notice.warning({
                          title: data.data
                        })
                      } else {
                        this.getTodos()
                      }
                    }, 'json')
                  }
                }
              })
            }
          }
        ]
      };
    },
    computed: {
      avatorPath: function () {
        return localStorage.avatorImgPath;
        // return this.headAppear;
      },
      todoLists() {
        let array = [];
        let len = this.todos.length;
        if (len > 0) {
          for (let i = 0; i < len; i++) {
            array.push({
              note: this.todos[i].remark,
              date: this.todos[i].dealDate,
              idName: '',
              id: this.todos[i].id,
              i: i + 1
            })
          }
        }
        return array
      }
    },
    methods: {
      getMoreInfo(){
        this.$router.push({
          name:'ccb_waitList'
        })
      },
      collapse(index) {
        if (this.currentTodo === index) {
          this.currentTodo = ""
        } else {
          this.currentTodo = index
        }
      },
      recordTodos(date) {
        this.visible = true;
        this.formItem.currentNoteDate = date
      },
      cancelCreateTodo() {
        this.formItem.note = "";
        this.formItem.currentNoteDate = ""
      },
      saveTodo() {
        let obj = {
          remark: this.formItem.note,
          dealDate: this.formItem.currentNoteDate
        };
        $.ajax('api/note/addNote', {
          method: "post",
          contentType: "application/json;charset=utf-8",
          data: JSON.stringify(obj),
          success: (data) => {
            if (data.code === 400) {
              this.$Notice.warning({
                title: data.data
              })
            } else {
              this.$Notice.success({
                title: data.data
              });
              this.visible = false;
              this.getTodos();
              this.cancelCreateTodo()
            }
          }
        })
      },
      deleteTodo(id) {
        $.get('../api/note/deleteNote/' + id, {}, (data) => {
          if (data.code === 400) {
            this.$Notice.warning({
              title: data.data
            })
          } else {
            this.getTodos()
          }
        }, 'json')
      },
      getTodos() {
        $.get('../api/note/getAllNotes', {}, (data) => {
          this.todos = data
        }, 'json')
      },
      backMesTitleList() {
        this.showMesTitleList = true;
      },
    },
    mounted() {
      localStorage.allCalendar = true;
    },
    created() {
      this.picNum = Math.floor(Math.random() * 10);
    },
    destroyed() {
      localStorage.allCalendar = false;
    }
  };
</script>
<style lang="less">
  @import './todos.less';
</style>
<style scoped>
  .todoCollapse {
    border: none !important;
    background: transparent !important;
  }

  .todoNote {
    /*text-shadow: 0 0 1px;*/
  }
</style>
